<template>
  <div class="center w-header">
    <div class="center-box-flex">
      <a href="#"><div class="w-logo"></div></a>
      <div class="flex-fill"></div>
      <div>
        <w-search class="w-s"></w-search>
      </div>
      <div style="padding: 22px 0 0 22px">
        <n-badge :value="carNum" :max="15">
          <n-button type="warning" class="w-b">
            <template #icon>
              <n-icon>
                <cart />
              </n-icon>
            </template>
            购物车</n-button
          >
        </n-badge>
      </div>
    </div>
  </div>
</template>
<script lang="ts" >
import { NButton, NBadge, NIcon } from "naive-ui";
import { Cart } from "@vicons/ionicons5";
import WSearch from "./WSearch.vue";
export default {
  data() {
    return {
      carNum: 1,
    };
  },
  components: {
    WSearch: WSearch,
    NButton,
    NBadge,
    NIcon,
    Cart,
  },
};
</script>
<style lang="scss" scoped>
@import "@/assets/scss/variables.scss";
.w-header {
  background: $back-color-header;
}
.w-logo {
  background: url("/images/logo.png") left center no-repeat;
  width: 375px;
  height: 90px;
}
.w-s {
  margin-top: 22px;
}
.w-b {
  width: 8em;
}
</style>